@import "./colors.less";

.flat-theme-root:extend(.flat-colors-root) {
    --brand: var(--blue-6);

    --primary: var(--blue-6);
    --primary-strong: var(--blue-7);
    --primary-stronger: var(--blue-8);
    --primary-weak: var(--blue-5);
    --primary-weaker: var(--blue-2);

    --danger: var(--red-6);
    --danger-strong: var(--red-7);
    --danger-stronger: var(--red-8);
    --danger-weak: var(--red-5);
    --danger-weaker: var(--red-2);

    --success: var(--green-6);
    --success-strong: var(--green-7);
    --success-stronger: var(--green-8);
    --success-weak: var(--green-5);
    --success-weaker: var(--green-2);

    --warning: var(--yellow-6);
    --warning-strong: var(--yellow-7);
    --warning-stronger: var(--yellow-8);
    --warning-weak: var(--yellow-5);
    --warning-weaker: var(--yellow-2);

    --text: var(--grey-6);
    --text-strong: var(--grey-8);
    --text-stronger: var(--grey-12);
    --text-weak: var(--grey-5);
    --text-weaker: var(--grey-3);

    --link: var(--blue-6);
    --link-hover: var(--blue-5);
    --link-active: var(--blue-7);
    --link-focus: var(--blue-5);
    --link-visited: var(--blue-3);

    --font-family: "Helvetica Neue", "PingFang SC", "Source Han Sans SC", "Microsoft YaHei",
        "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;

    font-family: var(--font-family);
    color: var(--text);
}

html[lang^="zh"] .flat-theme-root {
    --font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", "Helvetica Neue",
        "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
}

.flat-color-scheme-dark .flat-theme-root,
.flat-theme-root .flat-color-scheme-dark,
.flat-color-scheme-dark.flat-theme-root {
    --primary: var(--blue-7);
    --primary-strong: var(--blue-6);
    --primary-stronger: var(--blue-2);
    --primary-weak: var(--blue-8);
    --primary-weaker: var(--blue-10);

    --danger: var(--red-7);
    --danger-strong: var(--red-6);
    --danger-stronger: var(--red-2);
    --danger-weak: var(--red-8);
    --danger-weaker: var(--red-10);

    --success: var(--green-7);
    --success-strong: var(--green-6);
    --success-stronger: var(--green-2);
    --success-weak: var(--green-8);
    --success-weaker: var(--green-10);

    --warning: var(--yellow-7);
    --warning-strong: var(--yellow-6);
    --warning-stronger: var(--yellow-2);
    --warning-weak: var(--yellow-8);
    --warning-weaker: var(--yellow-10);

    --text: var(--grey-4);
    --text-strong: var(--grey-3);
    --text-stronger: var(--grey-0);
    --text-weak: var(--grey-7);
    --text-weaker: var(--grey-8);
}

.flat-theme-root {
    // @TODO: danger! more and more `#f6f6f6` were used
    background-color: #f6f6f6;
}

.flat-color-scheme-dark {

    & .flat-theme-root,
    &.flat-theme-root {
        background-color: var(--grey-12);
    }
}
